<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 优先使用 IE 最新版本和 Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 为移动设备添加 viewport-->
    <meta name="viewport"
          content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 设置苹果工具栏颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）-->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 忽略页面中的数字识别为电话，忽略email识别-->
    <meta name="format-detection" content="telphone=no, email=no">
    <!-- 下面三个是清除缓存 微信浏览器缓存严重又无刷新；这个方法调试的时候很方便-->
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>立即加入</title>
    <!--引入初始化样式-->
    <link rel="stylesheet" href="../lib/css/style-min.css">
    <!--引入YUDI样式-->
    <link rel="stylesheet" href="../lib/css/ydui.css">
    <!--引入YUDI自适应解决方案类库-->
    <script src="../lib/js/flexible/flexible.js"></script>
    <!-- 引入jQuery 2.0+ -->
    <script src="../lib/js/jquery/jquery-2.1.4.min.js"></script>
    <!-- 引入common -->
    <script src="../lib/js/common/common_pay.js"></script>
    <!-- 引入vue -->
    <script src="../lib/js/vue/vue.min.js"></script>
    <!--引入对应的css-->
    <link rel="stylesheet" href="../css/recruit/join.css">
</head>
<body>
<div id="join">
   <!--招募-->
    <div class="recruit">

    </div>
    <!--店主特权-->
    <div class="previleges">
        <h3>
            <img src="../images/join/darentequan@2x.png" alt="">
            <span>店主特权</span>
        </h3>
        <div class="previlegesContent">
            <div class="store  previlege">
                <div class="icon">
                    <img src="../images/join/dianpu@2x.png" alt="">
                </div>
                <div class="words">
                    <span>专属店铺</span>
                    <p>自动生成专属店铺,编辑店铺一键分享,任性添加商品,分享给小伙伴们,达成购买后佣金轻松赚!</p>
                </div>
            </div>
            <div class="yongjin  previlege">
                <div class="icon">
                    <img src="../images/join/yongjin@2x.png" alt="">
                </div>
                <div class="words">
                    <span>轻松赚佣</span>
                    <p>一键分享最热门商品,好友购买后,赚取佣金有多么容易!</p>
                </div>
            </div>
            <div class="huiyuan previlege">
                <div class="icon">
                    <img src="../images/join/huiyuanjia&fanli@2x.png" alt="">
                </div>
                <div class="words">
                    <span>VIP价&返利</span>
                    <p>海量商品任性享受VIP价,购买后还可获得返利,以最省钱的姿态购买最优质的商品!</p>
                </div>
            </div>
            <div class="youhui previlege">
                <div class="icon">
                    <img src="../images/join/youhui.png" alt="">
                </div>
                <div class="words">
                    <span>1400元新人专享礼包</span>
                    <p>
                        10元满100元抵用卷*10张（全场通用）<br>
                        20元满200元抵用券*10张（全场通用）<br>
                        50元满1000元抵用券*10张（全场通用）<br>
                        店主特区抵用券600元（只限店主特区使用）</p>
                </div>
            </div>
        </div>
    </div>
    <!--选择期限支付-->
   <div class="step">
    <!--第一步选择期限-->
       <div class="terms">
            <h3>第一步:选择期限</h3>
           <ul class="termsContent">
               <li v-for="(item,index) in vipInfo" :class="{join_active:selTerm==item.talentType}" @click="selectTerms(item)">
                   <div class="left">
                       <span>{{item.vipName}}</span>
                       <p v-if="item.talentType==3">12个月店长权限</p>
                       <p v-if="item.talentType==2">6个月店长权限</p>
                       <p v-if="item.talentType==1">3个月店长权限</p>
                   </div>
                   <div class="right">
                       &yen;<span>{{item.money}}</span>
                   </div>
                   <div class="clearfix"></div>
               </li>
           </ul>
       </div>
       <!--第二步验证手机号-->
       <div class="validateTel">
            <h3>第二步:手机验证</h3>
           <div class="validateTel_Content">
               <div class="phone-id">
                   <input type="text" id="phone-id"  placeholder="请输入手机号码">
               </div>
               <div class="code-id">
                   <input type="text" id="code-id" placeholder="请输入验证码">
                   <button id="send-code-id" onclick="sendCode()">点击获取验证码</button>
               </div>
               <div class="pay" @click="bindPhone()">
                   <p>立即支付</p>
               </div>
               <p class="notice">注:如您还不是败家用户,支付成功后将自动为您进行注册!</p>
           </div>
       </div>
   </div>


    <!--显示灰色 jQuery 遮罩层-->
    <div id="fullbg"></div>
    <div id="dialog">
        <div class="tishi">
            <img src="../images/recruit/anniu@2x.png" alt="" class="anniu" onclick="closeBg()">
        </div>
    </div>
</div>
</body>
<script src="../lib/js/ui.js"></script>
<script src="../js/recruit/join.js"></script>
</html>